<template>
  <div class="app-container">

    <div class="header">
        <span class="round-text">理论知识抢答题</span>
    </div>
    <el-divider />

    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <div class="question-header">
            <!-- <h2>抢答题 {{ currentIndex + 1 }}</h2> -->
            <i class="el-icon-time" @click="startTimer"></i>
            <div class="timer">剩余时间: {{ minutes }}:{{ seconds }}</div>
          </div>

          <div class="question-content">
            <h3>{{ currentQuestion.content }}</h3>
          </div>

          <div class="options">
            <p>选项：</p>
            <el-checkbox-group v-model="checkList">
              <el-checkbox 
                v-for="option in currentQuestion.options" 
                :key="option.value"
                :label="option.value"
              >
               <span>{{ option.value }}.</span> <span>{{ option.label }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>

          <div v-if="showAnswer" class="answer-content">
            <p>正确答案：{{ currentQuestion.correct.join(', ') }}</p>
            <!-- <p v-if="isCorrect">恭喜你，答对了！</p>
            <p v-else>很遗憾，答错了！</p> -->
          </div>

          <div class="action-buttons">
            <el-button 
              type="primary" 
              @click="submitAnswer" 
              v-if="!showAnswer"
              size="large"
            >
              确定
            </el-button>
            <el-button 
              type="primary" 
              @click="nextQuestion" 
              v-if="showAnswer && currentIndex < quList.length - 1"
              size="large"
            >
              下一题
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="btn">
      <el-button @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button @click="()=>this.$router.push({name:'FenceOff'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResponderState',

  data() {
    return {
      currentIndex: 0,
      quList: [
        {
          id: 1,
          content: '1、社区警务工作三大任务是什么？',
          options: [
            { value: 'A', label: '规定任务' },
            { value: 'B', label: '指令任务' },
            { value: 'C', label: '推送任务' }
          ],
          correct: ['A', 'B', 'C']
        },
        {
          id: 2,
          content: '2、社区民警的主要职责是什么？',
          options: [
            { value: 'A', label: '管理实有人口' },
            { value: 'B', label: '掌握社情民意' },
            { value: 'C', label: '组织安全防范' },
            { value: 'D', label: '维护社区秩序' }
          ],
          correct: ['A', 'B', 'C', 'D']
        },
        {
          id: 3,
          content: '3、派出所"两队一室"分别指什么？',
          options: [
            { value: 'A', label: '社区警务队' },
            { value: 'B', label: '案件办理队' },
            { value: 'C', label: '综合指挥室' }
          ],
          correct: ['A', 'B', 'C']
        }
      ],
      currentQuestion: {},
      showAnswer: false,
      checkList: [], // 多选答案
      isCorrect: false, // 是否答对
      timer: null,
      timeLeft: 60, // 60秒答题时间
      minutes: '01',
      seconds: '00'
    }
  },

  created() {
    this.loadQuestion()
  },

  methods: {
    loadQuestion() {
      this.currentQuestion = this.quList[this.currentIndex]
      this.showAnswer = false
      this.timeLeft = 60
      this.seconds = '00'
      this.minutes = '01'
      // this.startTimer()
    },

    startTimer() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      
      this.timer = setInterval(() => {
        this.timeLeft--
        this.minutes = Math.floor(this.timeLeft / 60).toString().padStart(2, '0')
        this.seconds = (this.timeLeft % 60).toString().padStart(2, '0')
        
        if (this.timeLeft <= 0) {
          this.$message.warning('答题时间已到!')
          this.showAnswer = true
          clearInterval(this.timer)
        }
      }, 1000)
    },

    submitAnswer() {
      this.showAnswer = true
      this.isCorrect = this.checkList.sort().join('') === this.currentQuestion.correct.sort().join('')
      if(this.isCorrect){
        this.$message({
          message:"回答正确！",
          type:"success",
          center:true
        })
      }else{
        this.$message({
          message:"很遗憾，回答错误！",
          type:"error",
          center:true
        })
      }
      clearInterval(this.timer)
    },

    nextQuestion() {
      this.currentIndex++
      this.loadQuestion()
      // this.startTimer()
      this.checkList = [] // 修复下一题后选项还被选择的情况
      this.isCorrect = false // 修复下一题后正确错误判断还存在的情况
    }
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;


  .header{
    text-align: center;
    color: white;
    font-size: 30px;
  }

  .el-divider{
    margin: 0;
  }
  

}

.el-row{
  margin: 20px 0;
}

.question-header {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-bottom: 30px;

  color: #f56c6c;
  font-size: 25px;

  h2 {
    margin: 0;
    color: #303133;
  }

  .timer {
    margin-left: 20px;
    font-size: 24px;
    color: #f56c6c;
    font-weight: bold;
  }
}

.question-content {
  margin-bottom: 30px;
  
  h3 {
    font-size: 30px;
    color: #303133;
    margin-bottom: 20px;
    line-height: 1.5;
  }
}

.options {
  margin-top: 25px;
  
  p {
    margin-bottom: 20px;
    font-weight: bold;
    color: #606266;
    font-size: 32px;
  }
  
  span{
    font-size: 26px;
  }

  .el-checkbox-group {
    font-size: 36px;
  }

  .el-checkbox {
    display: block;
    margin-bottom: 20px;
    padding: 15px 20px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    transition: all 0.3s;
    font-size: 32px;
    
    margin-right: 30px;
    &:hover {
      background-color: #f5f7fa;
    }
    
    &.is-checked {
      border-color: #409eff;
      background-color: #ecf5ff;
    }
  }
}

.answer-content {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.action-buttons {
  text-align: center;
  margin-top: 30px;

  .el-button {
    padding: 15px 35px;
    font-size: 16px;
  }
}

.btn {
  width: 98%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;
}
</style>